<template>
  <dl 
    :class="$style.container" 
    @mouseleave="id=null">
    <dt :class="$style.title">{{ title }}</dt>
    <div :class="$style.item">
      <dd 
        v-for="(item,idx) in lists.slice(0,6)"
        :key="item.doubanId + 'aiyiqi'+idx" 
        @mouseover="id=idx" 
        @click.stop="handleItemClick(item)">
        <img 
          v-lazy="item.poster" 
          alt="">
        <div :class="$style.bottom">
          <div :class="$style.top">
            <h4 :class="id === idx ? $style.active :''">{{ item.original_title }}</h4>
            <el-button 
              v-if="item.price && !item.isMyFilm" 
              size="mini">购买</el-button>
            <el-button 
              v-else-if="item.price && item.isMyFilm" 
              size="mini">已购买</el-button>
            <p 
              v-else 
              :class="$style.free">免费</p>
          </div>
          <p>{{ item.summary }}</p>
        </div>
      </dd>
    </div>
  </dl>
</template>

<script>
import http from '../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: null
    }
  },
  methods: {
    handleItemClick(item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick(item) {
      try {
        let token = this.$cookiz.get(this.$api.token)
        if (!token) {
          this.$store.commit('SET_SHOW', true)
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart?token=${token}`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  overflow: hidden;
  margin-top: 20px;
  .title {
    margin-bottom: 15px;
    display: inline-block;
    font-size: 26px;
    line-height: 28px;
    color: #222;
  }
  .item {
    font-size: 0px;
    dd {
      float: left;
      margin: 0px 5px;
      width: calc((100% - 50px) / 6);
      &:first-child {
        margin-left: 0px;
      }
      &:last-child {
        margin-right: 0px;
      }
      img {
        width: 100%;
        height: 118px;
        object-fit: cover;
        &:hover {
          transition: all 0.5s;
          transform: scale(1.1);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        }
      }
      .bottom {
        background: #f8f8f8;
        line-height: 1;
        padding: 6px 10px;
        .top {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          h4 {
            width: 80px;
            line-height: 23px;
            height: 23px;
            font-size: 15px;
            vertical-align: baseline;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #222;
          }
          button {
            background: #f20d0d;
            font-size: 12px;
            font-weight: 400;
            color: #fff;
            &:hover,
            &focus {
              color: #fff;
              border-color: #f20d0d;
              background-color: #f20d0d;
            }
          }
          .free {
            color: #be9e4d;
            font-size: 12px;
          }
          .active {
            color: #e36049;
          }
        }
        p {
          margin-top: 2px;
          font-size: 14px;
          color: #999;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
